<!DOCTYPE html>
<html>
<head>
<title>分配权限</title>
#include("/admin/_common/head.html")
<!-- 样 式 文 件 -->
<link rel="stylesheet" href="#CTX()/admin/css/form.css?_v=#VERSION()" />
</head>
<!-- 代 码 结 构 -->
<body class="pear-container">
    <form id="edit-form" class="layui-form" lay-filter="edit-form" onsubmit="return false;">
        <input type="hidden" name="id" value="#(bean.id??)">
        <input type="hidden" name="deptIds">
        
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.name)" />
                    </div>
                    <label class="layui-form-label">权限字符串</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.code)" />
                    </div>
                </div>
            </div>
            <div class="layui-card-header">数据权限</div>
            <div class="layui-card-body">
		        <div class="layui-form-item">
		            <label class="layui-form-label required">数据范围</label>
		            <div class="layui-input-inline">
		                <select name="dataScope" lay-verify="required" lay-filter="bean-dataScope">
		                    <option value="">-- 请选择 --</option>
		                #DICTS(type="role_data_scope")
                        #for(item : dicts)
		                    <option value="#(item.value)"#if(item.value == bean.dataScope??) selected#end>#(item.label)</option>
		                #end
		                </select>
		            </div>
		            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i>&nbsp;特殊情况下，设置为“自定数据权限”</div>
		        </div>
		        <div id="bean-table-div"#if(bean.dataScope?? != 'CUSTOM') style="display: none;"#end>
		        	<div id="beans-tree"></div>
		        </div>
            </div>
        </div>
        <div class="bottom" style="display: none;">
            <div class="button-container">
                <button id="submit-button" onclick="getCheckedData();" type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="submit-button">
                    <i class="layui-icon layui-icon-ok"></i> 提交
                </button>
            </div>
        </div>
    </form>

<!-- 资 源 引 入 -->
#include("/admin/_common/foot.html")

<script>
layui.use(['jquery', 'form', 'tree'], function() {
    let $ = layui.jquery, form = layui.form, tree = layui.tree;
    let treeId = "beans-tree-1";
    
    // 模块操作路径
    let MODULE_PATH = "#CTX()/admin/system/dept/";
    
    /*
     * 从后台获取树的完整数据
     */
    window.getTreeData = () => {
        let data = [];
        
        $.ajax({
            url: MODULE_PATH + "tree",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });
        
        return data;
    };
    
    /*
     * 从后台获取树中被选择的数据
     */
    window.querySelectedIds = () => {
    	let data = [];
    	
        $.ajax({
            url: MODULE_PATH + "queryByRole?roleId=#(bean.id??)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                for (let i = 0; i < result.length; i++){
                	data.push(result[i].id)
                }
            }
        });
        
        return data;
    };

    
    /*
     * 获取树中当前被选择的数据，存放到表单的指定input中
     */
    window.getCheckedData = () => {
        $("[name='deptIds']").val(window.tree.getCheckedIds(treeId).join());
    };
    
    /*
     * 监听数据范围下拉项变更事件
     */
    form.on('select(bean-dataScope)', function(data){
    	if (data.value=='CUSTOM'){
    		$("#bean-table-div").show();
    	} else {
    		$("#bean-table-div").hide();
    	}
    });
    
    /*
     * 渲染树
     */
    window.renderTree = () => {
        // 获取树的所有数据
        let data = window.getTreeData();
        // 渲染树控件
        tree.render({
            elem: '#beans-tree',
            id: treeId,
            data: data,
            method: "get",
            showCheckbox: true,  // 是否显示复选框
            accordion: true
        });
        // 获取树中被选择的数据，并调用共用方法使这此数据在树中变为被选中状态
        window.tree.selectChecked(treeId, data, window.querySelectedIds());
    };
    
    /*
     * 页面加载完成时初始化树
     */
    $(document).ready(() => {
        window.renderTree();
    });
    
});
</script>
</body>
</html>
